<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<!--    <th:block th:include="include :: header('登录')"/>-->
<!--    <link rel="stylesheet" th:href="@{/admin/css/other/login.css}"/>-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阳极管理系统</title>
    <style>
        html,body{width:100%;height:100%;padding:0px;margin:0px;}
        .container{
            width:100%;
            height:100%;
            padding:0px;
            margin:0px;
            display:flex;
            flex-direction: row;
            background-color:#EDF0FC;
        }
        .left_bg{
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: flex-end;
        }
        .left_img{
            width:100%;
        }
        .right_info{
            width: 580px;
            height:100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .login_box{
            width: 500px;
            height: 286px;
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .login_input{
            width:300px;
            height: 42px;
            line-height: 42px;
            box-sizing: border-box;
            display:flex;
            flex-direction: row;
            border: 1px solid #cecece;
        }
        .login_input .label{
            width: 60px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .login_input .value{
            flex:1;
            display:flex;
            width: 100%;
        }
        .login_input img{
            width: 32px;
            height:32px;
        }
        .login_input input{
            background-color:#ffffff;
            width:100%;
            height:36px;
            border:none;
        }
        .login_btn{
            width:200px;
            height: 40px;
            background-color: #2E60C4;
            color:#ffffff;
            font-size: 18px;
            border:none;
        }
        .mt_15{
            margin-top: 15px;
        }
        .mb_15{
            margin-bottom:15px;
        }
        .login_title{
            width:100%;
            text-align: center;
            font-size:28px;
            color: #999999;
        }
        .login_sub_title{
            width:100%;
            text-align: center;
            font-size:42px;
            font-weight: 550;
        }
        input{
            border: none;
            outline:none;
        }
    </style>
</head>
<!-- 代 码 结 构 -->
<body >
<form action="javascript:void(0);" class="layui-form" style="
            width:100%;
            height:100%;">
    <div class="container">
        <div class="left_bg">
            <img class="left_img" src="assets/bg.jpg" />
        </div>
        <div class="right_info">
            <div class="login_box">
                <div class="login_title mb_15 mt_15">
                    北海汇宏铝业有限公司
                </div>
                <div class="login_sub_title mb_15">
                    阳极生产管理系统
                </div>
                <div class="login_input mb_15" style="margin-top:50px;">
                    <div class="label">
                        <img src="assets/user.png" />
                    </div>
                    <div class="value">
                        <input name='username' type="text" placeholder="用户名"/>
                    </div>
                </div>
                <div class="login_input mb_15">
                    <div class="label">
                        <img src="assets/pwd.png" />
                    </div>
                    <div class="value">
                        <input name="password" type="password" placeholder="密码"/>
                    </div>
                </div>
                <div class="login_foot">
                    <button class="login_btn" lay-filter="login" lay-submit>登录</button>
                </div>
            </div>
        </div>
    </div>
</form>
<th:block th:include="include :: footer"/>
<script>
    layui.use(['form', 'jquery', 'layer', 'button', 'popup'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;
        let button = layui.button;
        let popup = layui.popup;
        // let captchaPath = "/system/captcha/generate";

        form.on('submit(login)', function (data) {
            let loader = layer.load();
            let btn = button.load({elem: '.login'});
            $.ajax({
                url: '/login',
                data: data.field,
                type: "post",
                dataType: 'json',
                success: function (result) {
                    layer.close(loader);
                    btn.stop(function () {
                        if (result.success) {
                            popup.success(result.msg, function () {
                                location.href = "/index";
                            })
                        } else {
                            popup.failure(result.msg, function () {
                                // document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
                            });
                        }
                    })
                }
            });
            return false;
        });

        $("#captchaImage").click(function () {
            document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
        })
        setInterval(function () {
            document.getElementById("captchaImage").src = captchaPath + "?" + Math.random();
        }, 30 * 1000);
        validateKickout();
    })
</script>
<script>
    if (window != top) {
        top.location.href = location.href;
    }

    function validateKickout() {
        if (getParam("abnormalout") == 1) {
            layer.alert("<font color='red'>您已在别处登录，请您修改密码或重新登录</font>", {
                    icon: 0,
                    title: "系统提示"
                },
                function (index) {
                    layer.close(index);
                });
        } else if (getParam("sessionout") == 1) {
            layer.alert("<font color='red'>登录已过期，请重新登录</font>", {
                    icon: 0,
                    title: "系统提示"
                },
                function (index) {
                    layer.close(index);
                });
        }
    }

    // function getParam(paramName) {
    //     var reg = new RegExp("(^|&)" + paramName + "=([^&]*)(&|$)");
    //     var r = window.location.search.substr(1).match(reg);
    //     if (r != null) return decodeURI(r[2]);
    //     return null;
    // }
</script>
</body>
</html>